<template>
  <view class="chart">
    <view class="item">
      <view class="title">
        <text class="title2">今日订单数</text>
        <animate-number
          ref="now"
          class="text"
          :from="0"
          :to="info.todayOrder"
          duration="1000"
          easing="easeOutQuad"
          :key="info.todayOrder"
        />
      </view>
      <view class="tips">
        <text>昨日：{{ info.yesterdayOrder }}<span>日环比：</span> </text>
        <text
          :class="
            per(info.todayOrder, info.yesterdayOrder) >= 0 ? 'roll2' : 'roll'
          "
          >{{ per(info.todayOrder, info.yesterdayOrder) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(info.todayOrder, info.yesterdayOrder) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(info.todayOrder, info.yesterdayOrder) >= 0"
          ></i
        ></text>
      </view>
      <view id="statusGroup1" class="real"></view>
      <view class="title">
        <text class="title2">本月订单数</text>
        <animate-number
          ref="now"
          class="text"
          :from="0"
          :to="info.monthOrder"
          duration="1000"
          easing="easeOutQuad"
          :key="info.monthOrder"
        />
      </view>
      <view class="tips">
        <text> 上月：{{ info.lastMonthOrder }}<span>月环比：</span> </text>
        <text
          :class="
            per(info.monthOrder, info.lastMonthOrder) >= 0 ? 'roll2' : 'roll'
          "
          >{{ per(info.monthOrder, info.lastMonthOrder) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(info.monthOrder, info.lastMonthOrder) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(info.monthOrder, info.lastMonthOrder) >= 0"
          ></i>
        </text>
      </view>
    </view>
    <view class="item">
      <view class="title">
        <text class="title2">今日支付人数</text>
        <animate-number
          ref="now"
          class="text"
          :from="0"
          :to="info.todayPay"
          duration="1000"
          easing="easeOutQuad"
          :key="info.todayPay"
        />
      </view>
      <view class="tips">
        <text>昨日：{{ info.yesterdayPay }}<span>日环比：</span> </text>
        <text
          :class="per(info.todayPay, info.yesterdayPay) >= 0 ? 'roll2' : 'roll'"
          >{{ per(info.todayPay, info.yesterdayPay) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(info.todayPay, info.yesterdayPay) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(info.todayPay, info.yesterdayPay) >= 0"
          ></i
        ></text>
      </view>
      <view id="statusGroup2" class="real"></view>
      <view class="title">
        <text class="title2"> 本月支付人数</text>
        <animate-number
          ref="now"
          class="text"
          :from="0"
          :to="info.monthPay"
          duration="1000"
          easing="easeOutQuad"
          :key="info.monthPay"
        />
      </view>
      <view class="tips">
        <text>上月：{{ info.lastMonthPay }}<span>月环比：</span> </text>
        <text
          :class="per(info.monthPay, info.lastMonthPay) >= 0 ? 'roll2' : 'roll'"
          >{{ per(info.monthPay, info.lastMonthPay) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(info.monthPay, info.lastMonthPay) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(info.monthPay, info.lastMonthPay) >= 0"
          ></i>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
var vk = uni.vk;
import * as echarts from "echarts";

export default {
  name: "getOrderStatusGroup",
  props: {},
  data() {
    return {
      info: {
        //今日订单数
        todayOrder: 0,
        //今日支付人数
        todayPay: 0,
        //昨日订单数
        yesterdayOrder: 0,
        //昨日支付人数
        yesterdayPay: 0,

        //本月订单数
        monthOrder: 0,
        //本月支付人数
        monthPay: 0,
        //上月订单数
        lastMonthOrder: 0,
        //上月支付人数
        lastMonthPay: 0,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    per(a, b) {
      if (a == 0 && b == 0) return 0;
      if (a == 0) return -100;
      if (b == 0) return 100;
      return (((a - b) / b) * 100).toFixed(2);
    },
    async init() {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.getOrderStatusGroup",
      });

      let list = res.list;
      // 	  [
      //     1,
      //     1,
      //     0,
      //     0,
      //     10,
      //     2,
      //     0,
      //     0
      // ]
      // 今日订单数

      this.info.todayOrder = list[0];
      this.info.todayPay = list[1];
      this.info.yesterdayOrder = list[2];
      this.info.yesterdayPay = list[3];
      this.info.monthOrder = list[4];
      this.info.monthPay = list[5];
      this.info.lastMonthOrder = list[6];
      this.info.lastMonthPay = list[7];

      let xList = [];
      let yList = [];
      let yList2 = [];
      res.list1.forEach((item) => {
        xList.push(item.text);
        yList.push(item.value);
      });
      res.list2.forEach((item) => {
        yList2.push(item.value);
      });
      // 渲染图表
      let myChart = echarts.getInstanceByDom(
        document.getElementById("statusGroup1")
      );
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById("statusGroup1"));
      }
      let option = {
        title: { show: false },
        backgroundColor: "#ffffff",
        grid: {
          left: "1%",
          right: "3%",
          top: "50%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: { trigger: "axis" },
        legend: { x: "left", y: "10px", data: ["今日"] },
        xAxis: [
          {
            type: "category",
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            data: xList,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            axisLabel: { show: false },
            splitLine: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "今日",
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle: { normal: { color: "#2d8cf0" } },
            itemStyle: { color: "#2d8cf0" },
            data: yList,
          },
        ],
      };
      myChart.setOption(option);

      let myChart2 = echarts.getInstanceByDom(
        document.getElementById("statusGroup2")
      );
      if (myChart2 == null) {
        // 如果不存在，就进行初始化。
        myChart2 = echarts.init(document.getElementById("statusGroup2"));
      }
      option.series[0].data = yList2;
      myChart2.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/pages/stats/common/css/index.scss";

span {
  margin-left: 20rpx;
}
.chart {
  flex: 1;
  height: 100%;
  display: flex;
  padding: 0 10px;
}
.item {
  flex: 1;
  height: 264px;
  padding: 0 10px;
  .title {
    font-size: 14px;
  }
  .title2 {
    margin-right: 10rpx;
    font-size: 13px;
    color: #515a6e;
  }
  .text {
    font-size: 18px;
    margin-left: 3px;
  }
  .tips {
    margin-top: 12rpx;
    font-size: 12px;
    color: #8c8c8c;
  }
  .real {
    width: 100%;
    height: 130px;
    margin: 4px 0;
  }
  .roll {
    font-style: italic;
    font-size: 12px;
    color: #67c23a;
  }
  .roll2 {
    font-style: italic;
    font-size: 12px;
    color: #ed4014;
  }
}
</style>
